<template>
	<RegularPage :currentTabbar="0" name="首页">
		<tn-sticky>
			<tn-subsection v-model="subsectionValue" size="lg" radius="0" mode="button">
				<tn-subsection-item title="金额" />
				<tn-subsection-item title="订单" />
				<tn-subsection-item title="用户" />
			</tn-subsection>
			<view style="padding: 1px;background:#fff;"></view>
		</tn-sticky>
		<swiper :style="{height: safeBottom}" disable-touch :current="subsectionValue">
			<swiper-item>
				<scroll-view scroll-y="true" style="height: 100%;">
					<view>
						<view class="tn-flex items-center tn-p-sm">
							<tn-title title="金额收益" mode="vLine" assist-color="tn-blue" />
						</view>
						<view class="monetary_gain tn-p-sm">
							<view class="tn-flex tn-p-sm items-center tn-gray-light_bg tn-radius"
								v-for="(item,index) in 4" :key="index">
								<view class="tn-round tn-flex tn-flex-center tn-mr-sm" :class="setBgColor(index)"
									style="width: 80rpx;height: 80rpx;">
									<image src="/static/home/dice.png" style="width: 50%;height: auto;" mode="widthFix">
									</image>
								</view>
								<view>
									<view>
										<tn-count-scroll :value="item" font-size="36" />
										<text class="tn-text-xs tn-text-gray tn-ml-xs">元</text>
									</view>
									<view class="tn-text-xs">
										<text>较上月</text>
										<text class="tn-type-success_text tn-ml-xs">+21%</text>
									</view>
								</view>
							</view>
						</view>
						<view class="tn-flex justify-around">
							<view class="tn-flex-center-center" v-for="(item,index) in amountTipTitle" :key="index">
								<view :class="colors[index].color" class="tn-round" style="width: 20rpx;height: 20rpx;">
								</view>
								<text class="tn-text-xs tn-ml-xs">{{item.title}}</text>
							</view>
						</view>
					</view>
					<view class="gap"></view>
					<view>
						<view class="tn-flex justify-between items-center tn-p-sm">
							<tn-title title="日收明细" mode="vLine" assist-color="tn-blue" />
							<tn-bubble-box :options="dailyIncomeOptions" position="left"
								@click="clickdailyIncomeBubbleBox">
								<view class="tn-gray-light_bg tn-p-xs tn-radius tn-w-auto">
									<text class="tn-mr-xs tn-text-xs">近{{day}}天</text>
									<tn-icon name="down" offset-top="3" />
								</view>
							</tn-bubble-box>
						</view>
						<view class="tn-p-sm">
							<qiun-data-charts type="column" :opts="dailyIncomeOpts" :chartData="dailyIncomeChartData"
								:canvas2d="true" canvasId="pCPiJsqKAvCFESkgQRoxEdLFAPkiPDSg" :ontouch="true" />
						</view>
					</view>
					<view class="gap"></view>
					<view>
						<view class="tn-flex justify-between items-center tn-p-sm">
							<tn-title title="业绩统计" mode="vLine" assist-color="tn-blue" class="tn-mr-sm" />
							<tn-bubble-box :options="performanceOptions" position="left"
								@click="clickperformanceBubbleBox">
								<view class="tn-gray-light_bg tn-p-xs tn-radius tn-w-auto">
									<text class="tn-mr-xs tn-text-xs">近{{performanceParams.limit}}月</text>
									<tn-icon name="down" offset-top="3" />
								</view>
							</tn-bubble-box>
						</view>
						<view class="tn-p-sm">
							<qiun-data-charts type="column" :opts="dailyIncomeOpts" :chartData="performanceChartData"
								:canvas2d="true" canvasId="pCPiJsqKAvCFESkgQRoxEdLFAPkiPDSga" :ontouch="true" />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" style="height: 100%;">
					<view>
						<view class="tn-flex items-center tn-p-sm">
							<tn-title title="售卖明细" mode="vLine" assist-color="tn-blue" />
						</view>
						<view class="monetary_gain tn-p-sm">
							<view class="tn-flex tn-p-sm items-center tn-gray-light_bg tn-radius"
								v-for="(item,index) in 4" :key="index" @click="goSaleDetailPage(index)">
								<view class="tn-round tn-flex tn-flex-center tn-mr-sm" :class="setBgColor(index)"
									style="width: 80rpx;height: 80rpx;">
									<image src="/static/home/dice.png" style="width: 50%;height: auto;" mode="widthFix">
									</image>
								</view>
								<view>
									<view>
										<tn-count-scroll :value="item" font-size="36" />
										<text class="tn-text-xs tn-text-gray tn-ml-xs">个</text>
									</view>
									<view class="tn-text-xs">
										<text>较上月</text>
										<text class="tn-type-danger_text tn-ml-xs">-19%</text>
									</view>
								</view>
							</view>
						</view>
						<view class="tn-flex justify-around">
							<view class="tn-flex-center-center" v-for="(item,index) in orderTipTitle" :key="index">
								<view :class="colors[index].color" class="tn-round" style="width: 20rpx;height: 20rpx;">
								</view>
								<text class="tn-text-xs tn-ml-xs">{{item.title}}</text>
							</view>
						</view>
					</view>
					<view class="gap"></view>
					<view>
						<view class="tn-flex justify-between items-center tn-p-sm">
							<tn-title title="订单统计" mode="vLine" assist-color="tn-blue" />
							<view class="tn-gray-light_bg tn-p-xs tn-radius tn-w-auto">
								<tn-icon name="calendar" offset-top="3" />
								<text class="tn-text-xs tn-ml-xs">近7天</text>
							</view>
						</view>
						<view class="tn-p-sm">
							<qiun-data-charts type="line" :opts="orderOpts" :chartData="ordersaleChartData"
								:canvas2d="true" canvasId="pCPiJsqKAvCFESkgQRoxEdLFAPkiPDSgc" />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" style="height: 100%;">
					<view>
						<view class="tn-flex items-center tn-p-sm">
							<tn-title title="用户扫码" mode="vLine" assist-color="tn-blue" />
						</view>
						<view class="monetary_gain tn-p-sm">
							<view class="tn-flex tn-p-sm items-center tn-gray-light_bg tn-radius"
								v-for="(item,index) in 2" :key="index">
								<view class="tn-round tn-flex tn-flex-center tn-mr-sm" :class="setBgColor(index)"
									style="width: 80rpx;height: 80rpx;">
									<image src="/static/home/dice.png" style="width: 50%;height: auto;" mode="widthFix">
									</image>
								</view>
								<view>
									<view>
										<tn-count-scroll :value="item" font-size="36" />
										<text class="tn-text-xs tn-text-gray tn-ml-xs">次</text>
									</view>
								</view>
							</view>
						</view>
						<view class="tn-flex justify-around">
							<view class="tn-flex-center-center" v-for="(item,index) in userTipTitle" :key="index">
								<view :class="colors[index].color" class="tn-round" style="width: 20rpx;height: 20rpx;">
								</view>
								<text class="tn-text-xs tn-ml-xs">{{item.title}}</text>
							</view>
						</view>
					</view>
					<view class="gap"></view>
					<view class="tn-flex justify-between items-center tn-p-sm tn-pt-xs">
						<tn-title title="消费统计" mode="vLine" assist-color="tn-blue" />
						<view class="tn-gray-light_bg tn-p-xs tn-radius tn-w-auto">
							<tn-icon name="calendar" offset-top="3" />
							<text class="tn-text-xs tn-ml-xs">本月</text>
						</view>
					</view>
					<view class="tn-p-sm tn-pt-xs">
						<loading v-if="isLoading" style="min-height: 360px;"></loading>
						<view class="empty" v-else-if="userTableData.length==0">
							<image
								src="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/02/a0c4966b-11af-4c87-93aa-359f9c03d89f83ee61eba8e363790692eb5fd8a98de7.png"
								mode="widthFix"></image>
							<text>这里空空荡荡，啥也没有留下</text>
						</view>
						<view v-else>
							<zb-table :show-header="true" :columns="column" :stripe="true"
								:data="userTableData"></zb-table>
							<view class="tn-pt-sm tn-flex-center">
								<uni-pagination :total="total" :current="userBuyCardList.current"
									:pageSize="userBuyCardList.size" @change="changePage" />
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</RegularPage>
	<tn-modal ref="modalRef" />
</template>
<script setup>
	import {} from "@/request/home/index.js"
	import zbTable from "@/uni_modules/zb-table/components/zb-table/zb-table.vue"
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"

	onLoad(() => {
		const token = uni.getStorageSync('token')
		const systemInfo = uni.getSystemInfoSync();
		let top = systemInfo.safeAreaInsets.top;
		let bottom = systemInfo.safeAreaInsets.bottom;
		safeBottom.value = `calc(90vh - ${top + bottom + 50}px)`
		if (!token) {
			// setTimeout(() => {
			// 	modalRef.value?.showModal({
			// 		title: '提示',
			// 		content: `登录失效，点击重新登录`,
			// 		confirm: () => {
			// 			uni.reLaunch({
			// 				url: '/pages/login/login'
			// 			})
			// 		}
			// 	})
			// }, 500)
			uni.reLaunch({
				url: '/pages/login/login'
			})
		} else {
			getDailyIncomeData(7)
			getPerformanceData()
			getOrderSaleData()
			getUserBuyCardList()
			/* getAmountOfIncomeApi().then(res => {
				if (res.code == 0) {
					amountOfIncome.value = Object.values(res.result)
				}
			})
			getUserChartData() */
		}
	})

	const isLoading = ref(true)
	const modalRef = ref()

	const column = ref([{
			name: 'name',
			label: '商品名称',
			width: 110,
			align: 'center'
		},
		{
			name: 'mobile',
			label: '手机号码',
			emptyString: '未绑定手机号',
			width: 110,
			align: 'center'
		},
		{
			name: 'orderPayTime',
			label: '下单时间',
			align: 'center'
		},
	])
	const userTableData = ref([])
	const safeBottom = ref('')
	const subsectionValue = ref(0)
	const currentTabbar = ref(0)
	const pageSize = ref(10)
	const day = ref('7')
	const total = ref(0)
	const performanceParams = ref({
		limit: 3,
		type: 1
	})
	const getCurrentYearMonth = computed(() => {
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, '0');
		return `${year}-${month}`;
	})

	const userBuyCardList = reactive({
		month: true,
		yearMonth: getCurrentYearMonth,
		current: 1,
		size: 8
	})
	const saleParams = ref({
		userType: 0,
		dateTime: "2025-05",
		current: 1,
		size: 10
	})
	const dailyIncomeChartData = ref({})
	const performanceChartData = ref({})
	const ordersale = ref([])
	const ordersaleChartData = ref([])
	const userSignInNumber = ref([])
	const amountOfIncome = ref([])
	const amountTipTitle = reactive([{
		title: '总营收',
	}, {
		title: '今日营收',
	}, {
		title: '总退款',
	}, {
		title: '日增营收',
	}])
	const orderTipTitle = reactive([{
		title: '代金券',
		type: 1
	}, {
		title: '套餐券',
		type: 0
	}, {
		title: '特价商品',
		type: 2
	}, {
		title: '其他',
		type: 3
	}])
	const userTipTitle = reactive([{
		title: '今日新增人数',
	}, {
		title: '本月新增人数',
	}])
	const colors = reactive([{
		color: 'tn-type-primary_bg'
	}, {
		color: 'tn-type-success_bg'
	}, {
		color: 'tn-type-warning_bg'
	}, {
		color: 'tn-type-danger_bg'
	}])
	const dailyIncomeOpts = ref({
		color: ["#1890FF", "#FAC858"],
		padding: [15, 15, 0, 5],
		touchMoveLimit: 24,
		enableScroll: true,
		legend: {},
		xAxis: {
			disableGrid: true,
			scrollShow: true,
			itemCount: 4
		},
		yAxis: {
			data: [{
				min: 0
			}]
		},
		extra: {
			column: {
				type: "group",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08
			}
		}
	})
	const orderOpts = ref({
		color: ["#1890FF"],
		padding: [15, 10, 0, 15],
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2
		},
		extra: {
			line: {
				type: "straight",
				width: 2,
				activeType: "hollow"
			}
		}
	})
	const dailyIncomeOptions = [{
			text: '7天'
		},
		{
			text: '15天'
		},
		{
			text: '30天'
		},
	]
	const performanceOptions = [{
			text: '3月'
		},
		{
			text: '6月'
		},
		{
			text: '12月'
		},
	]
	// 点击日收明细气泡
	const clickdailyIncomeBubbleBox = (index) => {
		day.value = dailyIncomeOptions[index].text.replace('天', '')
		getDailyIncomeData(Number(day.value))
	}
	// 点击业绩气泡
	const clickperformanceBubbleBox = (index) => {
		performanceParams.value.limit = Number(performanceOptions[index].text.replace('月', ''))
		getPerformanceData()
	}
	// 设置背景颜色
	const setBgColor = (index) => {
		switch (index) {
			case 0:
				return 'tn-type-primary_bg'
			case 1:
				return 'tn-type-success_bg'
			case 2:
				return 'tn-type-warning_bg'
			case 3:
				return 'tn-type-danger_bg'
		}
	}
	// 获取日收明细数据
	const getDailyIncomeData = (day) => {
		let res = {
			categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
			series: [{
				name: "完成量",
				data: [18, 27, 21, 24, 6, 28]
			}]
		};
		dailyIncomeChartData.value = JSON.parse(JSON.stringify(res));
	}
	// 获取业绩数据
	const getPerformanceData = () => {
		let res = {
			categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
			series: [{
					name: "目标值",
					data: [35, 36, 31, 33, 13, 34]
				},
				{
					name: "完成量",
					data: [18, 27, 21, 24, 6, 28]
				}
			]
		};

		performanceChartData.value = JSON.parse(JSON.stringify(res));
	}
	// 获取订单售卖详情
	const getOrderSaleData = () => {
		let res = {
			categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
			series: [{
					name: "成交量A",
					data: [35, 8, 25, 37, 4, 20]
				},
				{
					name: "成交量B",
					data: [70, 40, 65, 100, 44, 68]
				}
			]
		};
		ordersaleChartData.value = JSON.parse(JSON.stringify(res));
	}
	// 获取用户数据
	const getUserChartData = () => {
		getUserChartDataApi().then(res => {
			userSignInNumber.value = Object.values(res.result)
		})
	}
	// 获取用户消费列表
	const getUserBuyCardList = () => {
		isLoading.value = true
		userTableData.value = [{
			name: "代金券",
			mobile: "17262645674",
			orderPayTime: "2025-07-12"
		}, {
			name: "套餐券",
			mobile: "17262645674",
			orderPayTime: "2025-07-12"
		}, {
			name: "特价商品",
			mobile: "17262645674",
			orderPayTime: "2025-07-12"
		}, {
			name: "其他",
			mobile: "17262645674",
			orderPayTime: "2025-07-12"
		}];
		total.value = Number(1)
		setTimeout(() => {
			isLoading.value = false
		}, 500)
	}
	// 更新页码
	const changePage = (e) => {
		userBuyCardList.current = e.current
		getUserBuyCardList()
	}
	// 跳转售卖详情页面
	const goSaleDetailPage = (index) => {
		uni.navigateTo({
			url: '/pages_index/saleDetail/saleDetail?type=' + orderTipTitle[index].type
		})
	}
</script>

<style scoped lang="scss">
	.monetary_gain {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}
</style>